<template>
  <el-dialog width="500px" :title="title" :visible.sync="dialogFormVisible">
    <div class="form-center">
      <el-form>
        <el-form-item label="班组名称：" :label-width="formLabelWidth">
          <el-input class="el_input" size="medium" v-model="groupInfo.name" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="所属组织：" :label-width="formLabelWidth">
          <el-select v-model="groupInfo.depId" size="medium" class="el_input" placeholder="请选择">
            <el-option v-for="item in organizations" :key="item.depId" :label="item.depName" :value="item.depId" />
          </el-select>
        </el-form-item>
      </el-form>
    </div>

    <div slot="footer" class="dialog-footer">
      <el-button size="small" @click="dialogFormVisible = false">取 消</el-button>
      <el-button size="small" type="primary" @click="submitFormInfo">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import HttpInterface from "../../../../util/httpInterface";
import { mapState } from "vuex";

export default {
  components: {},
  data() {
    return {
      title: "添加班组信息",
      dialogFormVisible: false,
      formLabelWidth: "100px",
      groupLeader: [],
      groupAll: [],
      groupInfo: {
        name: "",
        depId: "",
      },
    };
  },

  computed: {
    ...mapState(["organizations"])
  },

  methods: {
    verifyFormInfo() {
      if (!this.groupInfo.name) {
        this.warningMessage("请输入班组名称！");
        return false;
      }
      if (!this.groupInfo.depId) {
        this.warningMessage("请选择所属组织！");
        return false;
      }
      return true;
    },

    submitFormInfo () {
      if (!this.verifyFormInfo()) return;
      var _this = this;
      let { name, depId, id } = this.groupInfo;
      var params = { name, depId };
      if (id) {
        params.id = id;
      }
      let url = id ? HttpInterface.URL_GROUP_EDIT : HttpInterface.URL_GROUP_ADD_GROUP;
      HttpInterface.requestPost(this, url, params, function (response) {
        var data = response.data;
        if (data.success) {
          _this.dialogFormVisible = false;
          _this.$emit("refresh");
          _this.successMessage("操作成功！");
        } else {
          if (data.msg) {
            _this.errorMessage(data.msg);
          } else {
            _this.errorMessage("操作失败！");
          }
        }
      }, function (err) {
        _this.errorMessage("操作失败！");
      }, true);
    },

    show (row) {
      let id = row.id;
      this.dialogFormVisible = true;
      this.groupInfo = {
        name: "",
        depId: "",
      };
      if (id > 0) {
        this.title = "编辑班组信息";
        this.groupInfo.id = id;
        this.getGroupInfo(id);
      } else {
        this.title = "添加班组信息";
      }
    },

    // 班组回显
    getGroupInfo (id) {
      var _this = this;
      var params = { id };
      HttpInterface.requestPost(this, HttpInterface.URL_GROUP_EDITSHOW, params, function (response) {
        let { other } = response.data;
        _this.groupInfo = other;
      }, null);
    }
  }
};
</script>

<style  scoped>
.el_input {
  width: 230px;
}

.form-center {
  display: flex;
  justify-content: center;
}
</style>
